<template>
	<view>
		<u-navbar title="申请报名" :autoBack="true" :placeholder="true" titleStyle="color:#fff" bgColor="#7e5a91"
			leftIconColor="#fff"></u-navbar>

		<view class="container">

			<view class="apply-content">
				<view class="product">
					<view class="product-main">
						<view class="product-main-img-box">
							<image class="product-main-img" :src="productDetail.thum_image" mode=""></image>
						</view>
						<view class="product-main-info">
							<view class="product-main-info-item">
								<span class="iconfont icon-zhuanjiaguanli icons"></span> {{productDetail.grade}}
							</view>
							<view class="product-main-info-item">
								<span class="iconfont icon-weizhi1 icons"></span> {{productDetail.adress_det}}
							</view>
							<view class="product-main-info-item">
								<span class="iconfont icon-rili icons"></span> {{productDetail.month}}
							</view>
							<view class="product-main-info-item">
								<span class="iconfont icon-history icons"></span> {{productDetail.zhouqi}}
							</view>
						</view>
					</view>
					<view>{{productDetail.name}}</view>
				</view>


				<view class="add-item">
					<view class="">
						购买数量:1
					</view>

					<view class="add-item-right">
						<view class="add-item-subtotal">
							￥{{productDetail.price}}元
						</view>
					</view>
				</view>

				<!-- 出行人 -->
				<view class="personnel" v-if="checktraveller">
					<view class="personnel-info">
						<view class="">
							出行人：{{travellerList[checktravellerIdx].name}}
						</view>
						<view class="">
							电话：{{travellerList[checktravellerIdx].mobile}}
						</view>
						<view class="">
							证件号：{{travellerList[checktravellerIdx].idcard}}
						</view>
					</view>

					<view class="personnel-handle-box">
						<view class="personnel-handle" @click="editTravellerShowHandle">
							编辑
						</view>
						<view class="personnel-handle personnel-handle-remove" @click="checktraveller = false">
							移除
						</view>
					</view>
				</view>

				<view class="add-item" @click="travellerpopShow = true" v-else>
					<view class="">
						出行人(学生)
					</view>

					<view class="add-item-right">
						添加 <span class="iconfont icon-xiangyou"></span>
					</view>
				</view>

				<!-- 随行人 -->
				<view class="personnel" v-if="checklinkman">
					<view class="personnel-info">
						<view class="">
							联系人：{{linkmanList[checklinkmanIdx].name}}
						</view>
						<view class="">
							电话：{{linkmanList[checklinkmanIdx].mobile}}
						</view>
						<view class="">
							证件号：{{linkmanList[checklinkmanIdx].idcard}}
						</view>
					</view>

					<view class="personnel-handle-box">
						<view class="personnel-handle" @click="editLinkShowHandle">
							编辑
						</view>
						<view class="personnel-handle personnel-handle-remove" @click="checklinkman = false">
							移除
						</view>
					</view>
				</view>

				<view class="add-item" @click="addLinkShow" v-else>
					<view class="">
						联系人/监护人
					</view>

					<view class="add-item-right">
						添加 <span class="iconfont icon-xiangyou"></span>
					</view>
				</view>


				<view class="add-item" @click="addLinkShow" v-else>
					<view class="">
						联系人/监护人
					</view>

					<view class="add-item-right">
						添加 <span class="iconfont icon-xiangyou"></span>
					</view>
				</view>



			</view>




			<view class="apply-handle">
				<view class="apply-handle-total">
					合计：<span style="color: red;">￥{{productDetail.price}}元</span>
				</view>
				<view class="apply-handle-btn" @click="submitOrder">
					提交订单
				</view>
			</view>


			<!-- 出行人弹出框 -->
			<u-overlay :show="travellerpopShow" @click="travellerpopShow = false">
				<!-- 添加出行人选择 -->
				<view class="popup-box" @tap.stop>

					<view class="addtraveller-box u-border-bottom" @click="navigateTo"
						data-url="/subPages/addTravellers/addTravellers">
						<span class="iconfont icon-icon_tianjia"></span>添加新的出行人
					</view>

					<view class="traveller-list">
						<view class="traveller-item u-border-bottom" v-for="(item,index) in travellerList" :key="index">

							<view class="swipe-action ">
								<view class="swipe-action__content">
									<view class="swipe-action__content-top">
										<view class="swipe-action__content-top-name">
											出行人:{{item.name}}
										</view>
										<view class="swipe-action__content-top-sex">
											性别:{{item.sex == 1 ? '男' :'女'}}
										</view>
									</view>

									<view class="">
										证件号:{{item.idcard}}
									</view>

								</view>
							</view>

							<view class="traveller-item-handle" @click="addtraveller" :data-index="index">
								添加
							</view>
						</view>

						<u-divider text="没有更多数据" :dashed="true"></u-divider>
					</view>
					<view class="sub-btn-box">
						<view class="sub-btn" @click="travellerpopShow = false">
							取消
						</view>
					</view>
				</view>
			</u-overlay>

			<!-- 联系人弹出框 -->
			<u-overlay :show="linkShow" @click="linkShow = false">
				<!-- 添加出行人选择 -->
				<view class="popup-box" @tap.stop>

					<view class="addtraveller-box u-border-bottom" @click="navigateTo"
						data-url="/subPages/addLinkman/addLinkman">
						<span class="iconfont icon-icon_tianjia"></span>添加新的联系人
					</view>

					<view class="traveller-list">
						<view class="traveller-item u-border-bottom" v-for="(item,index) in linkmanList" :key="index">

							<view class="swipe-action ">
								<view class="swipe-action__content">
									<view class="swipe-action__content-top">
										<view class="swipe-action__content-top-name">
											出行人:{{item.name}}
										</view>
										<view class="swipe-action__content-top-sex">
											性别:{{item.sex == 1 ? '男' :'女'}}
										</view>
									</view>

									<view class="">
										证件号:{{item.idcard}}
									</view>

								</view>
							</view>

							<view class="traveller-item-handle" @click="addlinkman" :data-index="index">
								添加
							</view>
						</view>

						<u-divider text="没有更多数据" :dashed="true"></u-divider>
					</view>
					<view class="sub-btn-box">
						<view class="sub-btn" @click="linkShow = false">
							取消
						</view>
					</view>
				</view>
			</u-overlay>

			<!-- 编辑出行人弹出框 -->
			<u-overlay :show="editTravellerShow" @click="editTravellerShow = false">
				<view class="popup-box" @tap.stop>
					<view class="popup-box-title">
						出行人
					</view>

					<view class="form-box">

						<view class="form-item">
							<view class="form-item-title">
								姓名：<span style="color:red">*</span>
							</view>
							<view class="form-item-input-box">
								<input class="form-item-input" v-model="travellerformData.name" type="text"
									placeholder="请输入中文名" />
							</view>
						</view>

						<view class="form-item">
							<view class="form-item-title">
								性别：
							</view>
							<view class="form-item-input-box">
								<radio-group @change="TsexChange" class="form-group">
									<label class="form-lable" v-for="(item,index) in sexs" :key="index">
										<view class="radio-box">
											<radio :value="item.value" color="#7e5a91" class="radio"
												:checked="travellerformData.sex == item.value" />
										</view>
										<view class="weui-cell__bd">{{item.name}}</view>
									</label>
								</radio-group>
							</view>
						</view>

						<view class="form-item">
							<view class="form-item-title">
								身高：
							</view>
							<view class="form-item-input-box">
								<input class="form-item-input" v-model="travellerformData.high" type="number"
									placeholder="注明身高" />
							</view>
						</view>

						<view class="form-item">
							<view class="form-item-title">
								就读学校：
							</view>
							<view class="form-item-input-box">
								<input class="form-item-input" v-model="travellerformData.school" type="text"
									placeholder="学校全称" />
							</view>
						</view>

						<view class="form-item">
							<view class="form-item-title">
								所在年级：
							</view>
							<view class="form-item-input-box">
								<view class="picker-box">
									<picker mode="multiSelector" @change="TgradeChange" :range="gradeArray"
										:value="gradeIndex">
										<view>
											{{gradeArray[0][gradeIndex[0]]}}-{{gradeArray[1][gradeIndex[1]]}}
										</view>
									</picker>
								</view>
							</view>
						</view>

						<view class="form-item">
							<view class="form-item-title">
								出生日期：
							</view>
							<view class="form-item-input-box">
								<view class="picker-box">
									<picker mode="date" @change="TbirthChange">
										<view>{{travellerformData.birth}}</view>
									</picker>
								</view>

							</view>
						</view>

						<view class="form-item">
							<view class="form-item-title">
								营员手机：<span style="color:red">*</span>
							</view>
							<view class="form-item-input-box">
								<input class="form-item-input" v-model="travellerformData.mobile" type="number"
									placeholder="请输入营员本人手机号" />
							</view>
						</view>

						<view class="form-item">
							<view class="form-item-title">
								民族：
							</view>
							<view class="form-item-input-box">
								<input class="form-item-input" v-model="travellerformData.mingzu" type="text"
									placeholder="如回族请注明" />
							</view>
						</view>

						<view class="form-item">
							<view class="form-item-title">
								证件类型：
							</view>
							<view class="form-item-input-box">
								<radio-group @change="TcartTypeChange" class="form-group">
									<label class="form-lable" v-for="(item,index) in cartTypes" :key="index">
										<view class="radio-box">
											<radio :value="item.value" color="#7e5a91" class="radio"
												:checked="travellerformData.ishuzhao == item.value" />
										</view>
										<view class="weui-cell__bd">{{item.name}}</view>
									</label>
								</radio-group>
							</view>
						</view>

						<view class="form-item">
							<view class="form-item-title">
								证件号：<span style="color:red">*</span>
							</view>
							<view class="form-item-input-box">
								<input class="form-item-input" v-model="travellerformData.idcard" type="idcard"
									placeholder="请输入证件号" />
							</view>
						</view>

						<view class="form-item">
							<view class="form-item-title">
								健康状况：
							</view>
							<view class="form-item-input-box">
								<radio-group @change="ThealthChange" class="form-group">
									<label class="form-lable" v-for="(item,index) in healthStatus" :key="index">
										<view class="radio-box">
											<radio :value="item.value" color="#7e5a91" class="radio"
												:checked="travellerformData.health == item.value" />
										</view>
										<view class="weui-cell__bd">{{item.name}}</view>
									</label>
								</radio-group>
							</view>
						</view>

					</view>

					<view class="sub-btns-box">
						<view class="sub-btn-cell sub-btn-cell-cancle" @click="editTravellerShow = false">
							取消
						</view>
						<view class="sub-btn-cell" @click="editChuxing">
							提交修改
						</view>
					</view>
				</view>
			</u-overlay>

			<!-- 编辑联系人弹出框 -->
			<u-overlay :show="editLinkShow" @click="editLinkShow = false">
				<view class="popup-box" @tap.stop>

					<view class="popup-box-title">
						联系人
					</view>

					<view class="form-box">
						<view class="form-item">
							<view class="form-item-title">
								姓名：<span style="color:red">*</span>
							</view>
							<view class="form-item-input-box">
								<input class="form-item-input" v-model="formData.name" type="text"
									placeholder="姓名(关系人)" />
							</view>
						</view>

						<view class="form-item">
							<view class="form-item-title">
								电话：<span style="color:red">*</span>
							</view>
							<view class="form-item-input-box">
								<input class="form-item-input" v-model="formData.mobile" type="number"
									placeholder="联系方式(关系人)" />
							</view>
						</view>

						<view class="form-item">
							<view class="form-item-title">
								关系：<span style="color:red">*</span>
							</view>
							<view class="form-item-input-box">
								<input class="form-item-input" v-model="formData.relax" type="text"
									placeholder="关系(关系人)" />
							</view>
						</view>

						<view class="form-item">
							<view class="form-item-title">
								证件类型：
							</view>
							<view class="form-item-input-box">
								<radio-group @change="cartTypeChange" class="form-group">
									<label class="form-lable" v-for="(item,index) in cartTypes" :key="index">
										<view class="radio-box">
											<radio :value="item.value" color="#7e5a91" class="radio"
												:checked="formData.typecrad == item.value" />
										</view>
										<view class="weui-cell__bd">{{item.name}}</view>
									</label>
								</radio-group>
							</view>
						</view>

						<view class="form-item">
							<view class="form-item-title">
								证件号：<span style="color:red">*</span>
							</view>
							<view class="form-item-input-box">
								<input class="form-item-input" v-model="formData.idcard" type="idcard"
									placeholder="证件号(关系人)" />
							</view>
						</view>
					</view>



					<view class="sub-btns-box">
						<view class="sub-btn-cell sub-btn-cell-cancle" @click="editLinkShow = false">
							取消
						</view>
						<view class="sub-btn-cell" @click="editChuxinglianxi">
							提交修改
						</view>
					</view>
				</view>
			</u-overlay>


		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null, //商品id
				productDetail: {}, //产品详情
				travellerList: [], //出行人列表
				linkmanList: [], //联系人列表
				travellerpopShow: false, //添加出行人弹框
				linkShow: false, //联系人弹窗显示
				editTravellerShow: false, //编辑出行人弹框
				editLinkShow: false, //编辑联系人弹框
				checktraveller: false, //选择出行人状态
				checklinkman: false, //选择联系人状态
				checktravellerIdx: null, //出行人下标
				checklinkmanIdx: null, //联系人下标
				travellerformData: {
					name: '', //姓名
					sex: '', //性别
					high: '', //身高
					mingzu: '', //民族
					birth: '', //生日
					mobile: '', //营员手机号
					school: '', //学校
					grade: '年级/班级', //年级
					idcard: '', //证件号码
					ishuzhao: '', //证件类型
					health: '' //健康状况
				}, //出行人表单数据
				formData: {
					id: '', //id
					name: '', //姓名
					mobile: '', //手机号
					relax: '', //关系
					typecrad: '', //证件类型
					idcard: '', //证件号
				}, //联系人表单数据
				cartTypes: [{
					value: '1',
					name: '身份证'
				}, {
					value: '2',
					name: '港澳通行证'
				}, {
					value: '3',
					name: '台湾通行证'
				}, {
					value: '4',
					name: '护照'
				}], //证件类型
				sexs: [{
					value: '1',
					name: '男'
				}, {
					value: '2',
					name: '女'
				}], //性别
				healthStatus: [{
					value: '1',
					name: '健康'
				}, {
					value: '2',
					name: '其他'
				}], //健康状况
				gradeArray: [
					['1年级(小学)', '2年级(小学)', '3年级(小学)', '4年级(小学)', '5年级(小学)', '6年级(小学)', '7年级(初中)', '8年级(初中)', '9年级(初中)',
						'10年级(高中)', '11年级(高中)', '12年级(高中)'
					],
					['1班', '2班', '3班', '4班', '5班', '6班', '7班', '8班', '9班', '10班', '11班', '12班', '13班', '14班', '15班',
						'16班',
						'17班', '18班', '19班', '20班', '其他'
					]
				], //年级
				gradeIndex: [0, 0],
			}
		},
		onLoad(options) {
			try {
				this.id = options.id;
			} catch (e) {
				//TODO handle the exception
			}
			let today = new Date();
			let year = today.getFullYear();
			let month = today.getMonth() + 1; // 注意月份是从0开始计数的，所以需要加1
			let day = today.getDate();

			let date = year + "-" + month + "-" + day;
			this.travellerformData.birth = date;
		},
		onShow() {
			this.getChuxingList();

			this.gettourgoodbyid();

			this.getChuxinglianxiList();
		},
		methods: {
			// 获取出行人列表
			async getChuxingList() {
				let res = await this.$api.getChuxinglist({});

				this.travellerList = res.data;
			},

			// 获取商品详情
			async gettourgoodbyid() {
				let res = await this.$api.gettourgoodbyid({
					id: this.id
				});
				this.productDetail = res.data;
				console.log(res);
			},

			// 报名
			async submitOrder() {
				if (this.checktraveller == false) {
					this.$u.toast('请添加出行人')
					return;
				}
				if (this.checklinkman == false) {
					this.$u.toast('请添加联系人')
					return;
				}
				let res = await this.$api.goodsPay({
					goods_id: this.productDetail.id, //	商品id
					chuxinid: this.travellerList[this.checktravellerIdx].id, //出行人id
					peitongid: this.linkmanList[this.checklinkmanIdx].id,
					num: 1, //购买的数量（服务订单默认位1就行）
					address_id: '', //收获地址id
					server_type: '', //1=上门,2=到店 （仅服务订单填写）
					fxuser_id: '', //分销用户的id
					remark: '', //订单备注
					give_server_ids: '', //薅羊毛选的服务
				});
				console.log(res);

				if (res.mes = 'success') {
					wx.navigateTo({
						url: '/subPages/orderDetails/orderDetails?id=' + res.data.id
					})
				}

				// this.paymentCallBack(res.data)
			},

			// 获取联系人列表
			async getChuxinglianxiList() {
				let res = await this.$api.getChuxinglianxiList({});
				this.linkmanList = res.data;
			},

			// 添加出行人员
			addtraveller(e) {
				this.checktravellerIdx = e.currentTarget.dataset.index;
				this.checktraveller = true;
				this.travellerpopShow = false;
			},

			// 添加联系人窗口弹出
			addLinkShow() {
				if (this.checktraveller == false) {
					this.$u.toast('请先添加出行人')
					return;
				}
				this.linkShow = true;
			},

			// 添加联系人
			addlinkman(e) {
				this.checklinkmanIdx = e.currentTarget.dataset.index;
				this.checklinkman = true;
				this.linkShow = false;
			},

			// 微信支付
			paymentCallBack(data) {
				let that = this
				uni.requestPayment({
					provider: 'wxpay', // 服务提提供商
					timeStamp: data.timeStamp, // 时间戳
					nonceStr: data.nonceStr, // 随机字符串
					package: data.package,
					signType: data.signType, // 签名算法
					paySign: data.paySign, // 签名
					success(res) {
						//支付成功回调
						that.$u.toast('支付成功')
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					},
					fail() {
						//支付失败回调
						that.$u.toast('已取消支付')
					}
				})
			},

			// 页面跳转
			navigateTo(e) {
				wx.navigateTo({
					url: e.currentTarget.dataset.url
				})
			},

			// 修改出行联系人
			async editChuxinglianxi() {
				if (this.formData.name == '') {
					this.$u.toast('请输入姓名')
					return;
				}
				if (this.formData.mobile == '') {
					this.$u.toast('请输入手机号')
					return;
				}
				if (this.formData.relax == '') {
					this.$u.toast('请输入关系')
					return;
				}
				if (this.formData.idcard == '') {
					this.$u.toast('请输入证件号')
					return;
				}
				let res = await this.$api.addChuxinglianxi(this.formData);

				if (res.code == 1) {
					this.$u.toast(res.msg)
					this.editLinkShow = false;
				}
			},

			// 编辑出行人员
			async editChuxing() {
				console.log('lll')

				if (this.travellerformData.name == '') {
					this.$u.toast('请输入姓名')
					return;
				}
				if (this.travellerformData.mobile == '') {
					this.$u.toast('请输入营员本人手机号')
					return;
				}
				if (this.travellerformData.idcard == '') {
					this.$u.toast('请输入证件号')
					return;
				}
				let res = await this.$api.addchuxing(this.travellerformData)
				if (res.code == 1) {
					this.$u.toast(res.msg)
					this.editTravellerShow = false;
				}
			},

			// 编辑出行人handle
			editTravellerShowHandle() {
				this.editTravellerShow = true;
				this.travellerformData = this.travellerList[this.checktravellerIdx];
				console.log(this.travellerformData);
			},

			// 编辑联系人handle
			editLinkShowHandle() {
				this.editLinkShow = true;
				this.formData = this.linkmanList[this.checklinkmanIdx];
			},

			// 身份信息切换
			cartTypeChange(e) {
				this.formData.typecrad = e.detail.value
			},

			// 出行人性别切换
			TsexChange(e) {
				this.travellerformData.sex = e.detail.value
			},

			// 出行人健康状况切换
			ThealthChange(e) {
				this.travellerformData.health = e.detail.value
			},

			// 出行人证件类型切换
			TcartTypeChange(e) {
				this.travellerformData.ishuzhao = e.detail.value
			},

			// 出行人出生日期选择
			TbirthChange(e) {
				this.travellerformData.birth = e.detail.value
			},

			// 出行人年级切换
			TgradeChange(e) {
				this.gradeIndex = e.detail.value;
				this.travellerformData.grade = this.gradeArray[0][this.gradeIndex[0]] + '-' + this.gradeArray[1][this
					.gradeIndex[1]
				]
			},

		}
	}
</script>

<style lang="scss" scoped>
	.container {

		.apply-content {
			background-color: white;
			font-size: 28rpx;

			.product {
				padding: 20rpx;

				.product-main {
					display: flex;

					.product-main-img-box {
						margin-right: 20rpx;

						.product-main-img {
							height: 200rpx;
							width: 300rpx;
						}
					}

					.product-main-info {
						.product-main-info-item {
							font-size: 26rpx;
							height: 50rpx;
							line-height: 50rpx;
							color: #666;

							.icons {
								margin-right: 10rpx;
							}
						}
					}
				}
			}

			.add-item {
				height: 80rpx;
				line-height: 80rpx;
				display: flex;
				padding: 0 20rpx;
				justify-content: space-between;
				color: #666;
				border-top: 4rpx solid #ddd;

				.add-item-right {
					.icon-xiangyou {
						margin-left: 10rpx;
						height: 80rpx;
						line-height: 80rpx;
					}

					.add-item-subtotal {
						height: 60rpx;
						line-height: 60rpx;
						color: white;
						padding: 0 10rpx;
						background-color: #e00000;
						margin: 10rpx 0;
					}

				}
			}

			.personnel {
				display: flex;
				justify-content: space-between;
				height: 120rpx;
				border-top: 4rpx solid #ddd;

				.personnel-info {
					padding: 10rpx 20rpx;
					font-size: 24rpx;
					color: #666;
				}

				.personnel-handle-box {
					.personnel-handle {
						height: 60rpx;
						line-height: 60rpx;
						background-color: #165b92;
						width: 100rpx;
						text-align: center;
						color: white;
					}

					.personnel-handle-remove {
						background-color: #e00000;
					}
				}
			}
		}

		.apply-handle {
			position: absolute;
			bottom: 0;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			width: 100%;
			line-height: 100rpx;
			background-color: white;
			text-align: center;

			&-total {
				width: calc(100% - 300rpx);
			}


			&-btn {
				width: 300rpx;
				background-color: #7e5a91;
				color: white;

			}
		}

		.popup-box {
			position: absolute;
			top: 0;
			width: 100%;
			z-index: 1000;
			background-color: white;
			width: calc(100% - 160rpx);
			margin: 400rpx 80rpx 0 80rpx;
			border-radius: 5rpx;
			height: 800rpx;

			.form-box {
				padding: 0 20rpx;
				overflow-y: scroll;
				height: 600rpx;

				.form-item {
					display: flex;
					font-size: 26rpx;
					color: #666;
					margin-bottom: 25rpx;

					&-title {
						width: 200rpx;
						line-height: 50rpx;
					}

					&-input-box {
						width: 100%;

						.form-item-input {
							background-color: #eee;
							padding: 0 10rpx;
							height: 60rpx;
							width: calc(100% - 20rpx);
							border-radius: 5rpx;
						}

						.form-group {
							display: flex;
							flex-wrap: wrap;

							.form-lable {
								display: flex;
								line-height: 60rpx;
								margin-right: 20rpx;

								.radio-box {

									.radio {
										transform: scale(0.7);
									}
								}

							}
						}

						.picker-box {
							background-color: #eee;
							height: 60rpx;
							line-height: 60rpx;
							text-align: center;
							border-radius: 5rpx;
						}

					}

				}
			}





			.popup-box-title {
				text-align: center;
				line-height: 80rpx;
				color: #666;
				font-weight: 700;
			}

			.addtraveller-box {
				height: 110rpx;
				line-height: 110rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: 700;
				color: #333;

				.icon-icon_tianjia {
					margin-right: 10rpx;
					color: #7e5a91;

				}
			}

			.traveller-list {
				height: 600rpx;
				overflow-y: scroll;

				.traveller-item {
					height: 90rpx;
					display: flex;
					justify-content: space-between;
					color: #333;

					.swipe-action {
						height: 89rpx;
						padding: 0 10rpx;
						font-size: 28rpx;

						.swipe-action__content {
							&-top {
								display: flex;

								&-name {
									margin-right: 20rpx;
								}
							}
						}
					}

					.traveller-item-handle {
						background-color: #165b92;
						width: 100rpx;
						color: white;
						text-align: center;
						line-height: 90rpx;
						font-size: 26rpx;
					}

				}
			}

			.sub-btn-box {
				position: absolute;
				bottom: 0;
				width: 100%;

				.sub-btn {
					border-radius: 5rpx;
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					color: white;
					font-size: 28rpx;
					background-color: #7e5a91;
				}
			}

			.sub-btns-box {
				display: flex;
				position: absolute;
				bottom: 0;
				width: 100%;

				.sub-btn-cell {
					width: 50%;
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					color: white;
					font-size: 28rpx;
					background-color: #7e5a91;
				}

				.sub-btn-cell-cancle {
					background-color: #e00000;
				}
			}

		}
	}
</style>